<template>
	<div class="goods-item">
		<!-- 计算两种场景数据值 -->
		<span class="hidden">
			{{ item.couponClickUrl = item.couponClickUrl !=null ? item.couponClickUrl : item.couponShareUrl }}
			{{ item.couponClickUrl = item.couponClickUrl !=null ? item.couponClickUrl : item.clickUrl }}
			{{ item.couponClickUrl = item.couponClickUrl !=null ? item.couponClickUrl : item.url }}
			{{ item.commissionRate = item.commissionRate > 100 ? (item.commissionRate/100) : item.commissionRate }}
			{{ item.couponAmount = item.couponAmount!=null?item.couponAmount: item.couponInfo.substring(item.couponInfo.lastIndexOf("减")+1).replace(/[^0-9]/ig,"") }}
			{{ item.money = (item.zkFinalPrice - item.couponAmount).toFixed(2) }}
			{{ item.fanli = countFanli(item.money, item.commissionRate) }}
		</span>
		<el-card :body-style="{ padding: '10px' }">
			<!-- <a href="javascript:void(0)" @click="detail(item)"> -->
			<el-image :src="item.pictUrl" fit="fill"></el-image>
			<!-- </a> -->
			<div class="info" style="padding: 12px;">
				<span class="title">
					<!-- userType 0:淘宝 1:天猫 -->
					<span title="天猫" class="hidden gicon" v-if="item.userType==1"></span>
					{{item.title}}
				</span>
				<div class="bottom clearfix">
					<p>
						<span :class="['pull-left',{'text-del':item.couponAmount!=''}]">现价 ￥{{item.zkFinalPrice}}</span>
						<span class="pull-right">月销 {{item.volume}} 件</span>
					</p>
					<p v-if="item.couponAmount == ''">
						<span class="pull-left color-red">无券</span>
					</p>
					<p v-if="item.couponAmount != ''">
						<span class="pull-left">券后 ￥{{item.money}}</span>
						<span class="pull-right color-red">券 ￥{{item.couponAmount=='' ? 0 : item.couponAmount}}</span>
					</p>
					<p style="font-weight: lighter;">
						<!-- <span class="pull-left">百分比 {{item.commissionRate}}%</span> -->
						<span class="pull-right color-green">返 ￥ {{item.fanli}}</span>
					</p>
					<!-- <p style="font-weight: lighter;">
						<el-row>
							<el-button type="danger" size="mini" style="width: 50%;" @click="detail(item)">
								相似推荐
							</el-button>
							<el-button type="success" size="mini" style="width: 50%;">去购买</el-button>
						</el-row>
					</p> -->
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'goods-item',
		props: {
			item: Object
		},
		methods: {
			countFanli(money, commissionRate) {
				var fanli = (money * commissionRate * 0.01).toFixed(2);
				if (fanli <= 2) {
					fanli = fanli * 0.7;
				} else if (fanli <= 10) {
					fanli = fanli * 0.6;
				} else if (fanli <= 20) {
					fanli = fanli * 0.5;
				} else if (fanli <= 50) {
					fanli = fanli * 0.6;
				} else if (fanli <= 80) {
					fanli = fanli * 0.5;
				} else if (fanli <= 9999999) {
					fanli = fanli * 0.4;
				}
				return fanli.toFixed(2);
			}
		}
	}
</script>

<style>
	.el-image {
	    position: inherit;
	}
	.goods-item {
		margin-bottom: 10px;
	}

	.goods-item span.title .gicon {
		display: inline-block;
		float: none;
		margin-right: auto;
	}

	.goods-item span.title {
		line-height: 1.2rem;
		font-size: .8rem;
		display: -webkit-box;
		white-space: break-spaces;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods-item p {
		font-size: 12px;
		color: #8f8f94;
		line-height: 1.4rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 0;
	}
</style>
